<!-- 阿秋-弹窗 -->
<template>
  <div class="public-dialog-box">
    <el-dialog
      :width="560"
      :show-close="false"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      destroy-on-close
      v-bind="$attrs"
      align-center
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="public-dialog-header">
          <h5 :id="titleId" :class="titleClass">{{ props.title }}</h5>
          <el-icon class="public-dialog-header-close" @click="close" color="rgba(0, 0, 0, 0.6)">
            <Close />
          </el-icon>
        </div>
      </template>
      <el-scrollbar max-height="calc(80vh - 136px)">
        <div class="public-dialog-main">
          <slot></slot>
        </div>
      </el-scrollbar>

      <template #footer="{ close }" v-if="props.showCancelButton || props.showConfirmButton">
        <div class="public-dialog-footer">
          <el-button type="info" color="#E7E7E7" @click="footerBtn('cancel')" v-if="props.showCancelButton">
            {{ props.cancelButtonText }}
          </el-button>
          <el-button type="primary" @click="footerBtn('confirm')" v-if="props.showConfirmButton" style="margin-left: 8px">
            {{ props.confirmButtonText }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "提示",
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
  cancelButtonText: {
    type: String,
    default: "取消",
  },
  confirmButtonText: {
    type: String,
    default: "确认",
  },
});
const emit = defineEmits(["confirmDialog"]);
const footerBtn = (type) => {
  emit("confirmDialog", type);
};
</script>

<style lang="scss">
.public-dialog-box {
  .el-dialog {
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
    padding: 0;
    overflow: hidden;
    .el-dialog__body {
      padding: 0;
    }
  }
  .el-dialog__header {
    padding: 0;
    width: 100%;
  }
  .el-dialog__footer {
    padding-bottom: 32px;
  }
  .public-dialog-header {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 27px 0 32px;
    color: rgba(0, 0, 0, 0.9);
    background: #f3f3f3;
    h5 {
      font-weight: 600;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.9);
    }
    .public-dialog-header-close {
      cursor: pointer;
      font-size: 16px;
      padding: 5px;
    }
  }
  .public-dialog-main {
    box-sizing: border-box;
    padding: 24px 32px;
  }
  .public-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 32px;
  }
}
</style>
